<template>
	<!-- 轮播图 -->
	<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
		<swiper-item v-for="(item,index) in rotateList">
			<view class="swiper-item">
				<image :src="item.url" mode="" style="width: 100%;"></image>
			</view>
		</swiper-item>
	</swiper>

	<view calss="content" style="background-color: bisque;">
		<!-- 按钮组 -->
		<view class="button-group">
			<button @click="getXianpPost('2')">自然风光类</button>
			<button @click="getXianpPost('1')">历史人文类</button>
			<button @click="getXianpPost('3')">现代娱乐类</button>
			<button @click="getXianpPost('4')">名胜古迹类</button>
		</view>

		<!-- 项目列表 -->
		<view class="item" style="display: flex;border: 1px solid gray;" v-for="(item,index) in xianitems" :key="index"
			@tap="toDetails(item.objectId)">
			<image :src="item.img" mode="" style="width: 200rpx;;height: 150rpx;"></image>
			<view class="msg" style="width: 500rpx;">
				<view class="title">{{item.name}}</view>
				<view class="intro">{{item.intro}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		CONFIG
	} from '../../untils/config.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	let xianitems = ref([])

	onLoad(() => {
		getXianpPost("1")
		getLuinbo()
	})

	async function getXianpPost(type) {
		let date = {
			"type": type
		}
		let ed = encodeURI(JSON.stringify(date))
		console.log(ed)
		let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/xianplayitem?where=" + ed)
		console.log(res)
		xianitems.value = res.results
	}

	function toDetails(id) {
		uni.navigateTo({
			url: `/pages/Details/Details?id=${id}`
		})
	}
	let rotateList = ref([])
	async function getLuinbo() {
		let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/img")
		console.log(res)
		rotateList.value = res.results
	}
</script>

<style lang="scss" scoped>
	/* 按钮组样式 */
	.button-group {
		/* 绝对定位 */
		top: 10px;
		/* 距离顶部20px */
		left: 20px;
		/* 距离左侧20px */
		display: flex;
		flex-direction: row;
		/* 水平排列按钮 */
	}

	button {
		height: 50px;
		padding: 5px 10px;
		/* 减小按钮的内边距 */
		border: 1px solid gray;
		background-color: orange;
		color: white;
		border-radius: 5px;
		cursor: pointer;
		transition: background-color 0.3s;
		font-size: 14px;
		/* 减小字体大小 */
		margin-right: 0;
		/* 去除按钮间的间距 */
	}

	button:last-child {
		margin-right: 0;
		/* 最后一个按钮不需要右边距 */
	}

	button:hover {
		background-color: darken(#7b68ee, 10%);
	}

	/* 项目列表样式 */
	.item {
		margin-top: 40px;
		/* 确保列表内容不被按钮遮挡 */
		display: flex;
		/* 水平排列 */
		align-items: center;
		/* 垂直居中 */
		padding: 10px;
		/* 内边距 */
		border: 1px solid #ccc;
		/* 边框 */
		border-radius: 5px;
		/* 圆角 */
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		/* 阴影 */
	}

	.item .title {
		font-size: 18px;
		/* 标题字体大小 */
		font-weight: bold;
		/* 加粗 */
		margin-bottom: 10px;
		/* 标题与简介之间的间距 */
	}

	.item .intro {
		font-size: 10px;
		/* 简介字体大小 */
		color: #666;
		/* 简介字体颜色 */
		line-height: 1.5;
		/* 行高 */
		margin-left: 5px;
		margin-right: 5px;
	}
</style>